<template>
    <div class="task-admin-list-box">
      <el-card class="box-card">
        <div class="query-box">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="手机号">
              <el-input v-model="formInline.phoneNumber" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
            <el-form-item label="微信号">
              <el-input v-model="formInline.data" placeholder="请输入微信号" clearable></el-input>
            </el-form-item>
            <el-form-item label="任务类型">
              <div class="block">
                <el-cascader
                  :options="dataList"
                  :props="{ checkStrictly: true, value:'id',label:'name'}"
                  v-model="formInline.typeId"
                  ref="myCascader"
                  clearable></el-cascader>
              </div>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.status" placeholder="请选择" class="status-select-box" clearable>
                <el-option label="待获取" value="1"></el-option>
                <el-option label="待反馈" value="2"></el-option>
                <el-option label="解封中" value="3"></el-option>
                <el-option label="成功" value="4"></el-option>
                <el-option label="失败" value="5"></el-option>
                <el-option label="活号" value="6"></el-option>
                <el-option label="微信不可解封" value="7"></el-option>
                <el-option label="无unban异常" value="8"></el-option>
                <el-option label="解封结果异常" value="9"></el-option>
                <el-option label="双封" value="10"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getTaskPages">搜索</el-button>
              <el-button type="primary" @click="exportTask">导出</el-button>
            </el-form-item>
          </el-form>

          <el-form :inline="true" class="query-phone-form-box">
            <el-form-item label="手机号">
              <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getByPhone">手机号查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="task-list-box">
          <template>
            <el-table border :data="list" style="width: 100%" class="task-table-box" >
              <el-table-column label="ID" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="任务" width="auto" >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.data }}</span>
                </template>
              </el-table-column>
              <el-table-column label="任务类型" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.typeName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px"><el-tag>{{ scope.row.status|taskStatusFilter }}</el-tag></span>
                </template>
              </el-table-column>
              <el-table-column label="返回状态" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.successData }}</span>
                </template>
              </el-table-column>
              <el-table-column label="绑定用户" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.bindUsername }}</span>
                </template>
              </el-table-column>
              <el-table-column label="手机ID" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="成功解封的手机号" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.phoneNumber }}</span>
                </template>
              </el-table-column>
              <el-table-column label="解封成功时间" width="auto">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.unlockSuccessTime }}</span>
                </template>
              </el-table-column>
              <el-table-column  label="操作" width="auto">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <el-pagination
              :total="total"
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[5, 10, 20, 30, 50]"
              :pager-count="5"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background
              layout="total, sizes, prev, pager, next">
            </el-pagination>
          </template>

          <!-- Table -->
          <el-dialog title="详情" :visible.sync="dialogTableVisible" width="70%" class="task-dialog-detail-box">
            <p><strong>ID：</strong>{{detail.id}}</p><el-divider/>
            <p><strong>手机号：</strong>{{detail.phoneNumber}}</p><el-divider/>
            <p><strong>用户：</strong>{{detail.username}}</p><el-divider/>
            <p><strong>状态：</strong>{{detail.statusName}}</p><el-divider/>
            <p><strong>关联：</strong>{{detail.taskData}}</p><el-divider/>
            <p><strong>时间：</strong>{{detail.returnTime}}</p><el-divider/>
            <p><strong>返回状态：</strong>{{detail.info}}</p><br>
          </el-dialog>
        </div>
      </el-card>
    </div>
</template>

<script>
    import mapStatus from "../utils/mapStatus";
    import mapStatusOption from "../utils/mapStatusOption";

    export default {
      name: "TaskAdminList",
      data() {
        return {
          orderTypeNames: this.$store.getters.getUser.orderTypeNames||[],
          successUser: true,
          formInline: {
            phoneNumber: '',
            data: '',
            typeId: null,
            typeName: ''
          },
          total: 12,
          pageSize: 20,
          currentPage: 1,
          pageNum: 0,
          list: [],

          dialogFormVisible: false,
          form: {
            username: '',
            password: ''
          },
          formLabelWidth: '100px',
          formInputWidth: '300px',

          dialogTableVisible: false,
          detail: [{
            typeName: '',
            count: 0,
          }],

          dataList: [],
          options: [{
            value: 204,
            label: '4.3不限制资料',
            children: [{
              value: 206,
              label: '434'
            }]
          }],

          detail:{
            id: '',
            phoneNumber:'',
            username: '',
            returnTime: '',
            statusName: '',
            taskData: '',
            info: ''
          },

        }
      },
      filters: {
        taskStatusFilter : mapStatus
      },
      methods: {
        getTaskPages(){
          let id = null;

          if (this.formInline.typeId){
            let tmp = this.formInline.typeId
            id = tmp[1] || tmp[0]
          }
          console.log(id)

          let phoneNumberVar = this.formInline.phoneNumber.replace(/[^0-9]/ig,"");
          console.log(phoneNumberVar)
          let params = {
            phoneNumber: phoneNumberVar,
            data: this.formInline.data,
            status: this.formInline.status,
            typeId: id,
            current: this.currentPage,
            pageSize: this.pageSize
          }
          this.$http.get('/v1/tasks/pages', {params})
          .then(res =>{
            console.log(res)
            this.list = [...res.data.list]
            this.total = res.data.total
            this.currentPage = res.data.pageNum
            this.pageSize = res.data.pageSize

          })
          .catch(err=>{
            let {response} = err
            if (response){
              this.$message.error(response.data.message);
              return false;
            }else {
              console.log(err)
            }
          })
        },
        exportTask(){
          let bigTypeId = '';
          if (this.formInline.typeId){
            bigTypeId =this.formInline.typeId[0]
          }
          let status = ''
          if (this.formInline.status){
            status = this.formInline.status
          }
          let url = `${this.$http.defaults.baseURL}v1/tasks/export?phoneNumber=${this.formInline.phoneNumber}&data=${this.formInline.data}&status=${status}&bigTypeId=${bigTypeId}`;
          console.log(url)
          window.open(url)
        },
        getByPhone(){
          let phoneVar = this.formInline.phone.replace(/[^0-9]/ig,"")
          let params = {phoneNumber: phoneVar}
          this.$http.get('/v1/orders/phone', {params})
          .then(res =>{
            console.log(res)
            this.dialogTableVisible = true
            this.detail.id = res.data.id
            this.detail.phoneNumber = res.data.phoneNumber
            this.detail.username = res.data.modifierName
            this.detail.statusName = this.mapStatusOption(res.data.status)
            this.detail.taskData = res.data.taskData
            this.detail.returnTime = res.data.returnTime
            this.detail.info = res.data.info
          })
          .catch(err=>{
            let {response} = err
            if (response){
              this.$message.error(response.data.message);
              return false;
            }else {
              console.log(err)
            }
          })
        },
        handleCurrentChange(val){
          console.log('val=', val)
          this.currentPage = val;
          this.getTaskPages();
        },
        handleSizeChange(val){
          console.log('val=', val)
          this.pageSize = val;
          this.getTaskPages();
        },
        getTypeListTree(){
          let params = {type: 'TASK_TYPE'}
          this.$http.get('/v1/dictionaries', {params})
            .then(res =>{
              console.log(res)
              this.dataList = [...res.data]
              this.dataList.map(e =>{})
            })
            .catch(err=>{
              let {response} = err
              if (response){
                this.$message.error(response.data.message);
                return false;
              }else {
                console.log(err)
              }
            })
        },
        mapStatus,
        mapStatusOption,

        handleDelete(id){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.delete(`/v1/tasks/${id}`)
            .then(res =>{
              console.log(res)
              this.$message({type: 'success',message: '删除成功!'});
              this.getTaskPages()
            })
            .catch(err=>{
              let {response} = err
              if (response){
                this.$message.error(response.data.message);
                return false;
              }else {
                console.log(err)
              }
            })
          }).catch(() => this.$message({type: 'info',message: '已取消删除'}));
        }

      },

      created() {
        this.getTaskPages();
        this.getTypeListTree();
      }
    }
</script>

<style scoped>
  .operation-box{
    text-align: left;
  }
  .demo-form-inline{
    text-align:left;
  }
  .query-phone-form-box{
    text-align:left;
  }
  .status-select-box{
    width: 150px;
  }
  .task-table-box{
    text-align: center;
  }

  .task-dialog-detail-box{
    text-align:left;
  }
  .invite-box{
    text-align: left;
  }
</style>
